<template>
  <div>
    <div style="background: #fff;margin-bottom: 20px;"
      v-for="(item, index) in curList" :key="item.departmentId"
    >
    <a-collapse v-model="activeKey" expand-icon-position="right">
      <a-collapse-panel :key="item.departmentId" :disabled="notSub(item)" :showArrow="false" :forceRender="true">
        <template slot="header">
          <a-row type="flex" justify="space-between" align="middle" style="width: 100%">
              <div style="display: flex;">
                <div style="width: 50px;">{{ index + 1 }}</div>
                <div style="width: 225px;">{{ item.deptName }}</div>
                <div v-if="!notSub(item)" style="width: 150px;">会议数量：{{ item.list.length }}</div>
                <div v-if="!notSub(item)">预算：{{ deptBudget(item.list) }} 元</div>
                <div v-if="notSub(item)" style="width: 150px;color: #FF4D4F ;">未提交</div>
              </div>
              <div v-if="!notSub(item)">
                  <a-button v-if="editable" style="margin-right: 30px;" slot="extra" @click="(e) => handleClick(e, 'editTable_'+item.departmentId)" type="primary">
                    增加行
                  </a-button>
                  <a class="btn_right">
                      <span style="padding: 0 6px;">{{ activeKey.includes(item.departmentId) ? '收起' : '展开' }}</span>
                      <a-icon :type="activeKey.includes(item.departmentId) ? 'up' : 'down'" />
                  </a>
              </div>
          
          </a-row>
        </template>
        <EditableTable v-if="!notSub(item)" :ref="'editTable_'+item.departmentId" :info.sync="item.list" :editable="editable"></EditableTable>
        
      </a-collapse-panel>
    </a-collapse>
    </div>
  </div>
</template>
<script>

import { Collapse } from 'ant-design-vue' // ant
import EditableTable from './editItem.vue'
export default {
  name: 'CollapaseCon',
  components: {
      ACollapse: Collapse,
      ACollapsePanel: Collapse['Panel'],
      EditableTable
  },
  props: {
    editable: {
      type: Boolean,
      default() {
          return true
      }, 
    },
    permissions: {
      type: [String, Number]
    },
    open: {
      type: Boolean,
      default() {
          return false
      }, 
    },
    info: {
      type: Array,
      default() {
          return []
      }, 
    },
  },
  data() {
    return {
      text: '萨斯撒阿萨飒飒',
      activeKey: []
    };
  },
  watch: {
    open: {
      handler(nv, old) {
        this.activeKey = nv ? this.allDepartmentId : [];
      }
    },
    info: {
      handler(nv, old) {
        if (nv && nv.length) {
          this.activeKey = this.open ? this.allDepartmentId : [];
        }
      }
    }
  },
  computed: {
    curList() {
      const info = this.info || [];
      const list = info.filter((item, index) => {
        return item.status != 'DRAFT'
      })
      if (this.permissions == 2) {
        return info
      }
      return this.editable ? info : list;
    },
    allDepartmentId() {
      const list = this.curList.map((e) => {
        if (this.notSub(e.status)) {
          return
        }
        return e.departmentId
      })
      return list.filter(e => e) //this.curList.map(e => e.departmentId)
    },
    deptBudget() {
      return (val) => {
        let num = 0;
        val.map((item, index) => {
          if (item.meetingBudget !== null && !isNaN(item.meetingBudget)) {
            num += item.meetingBudget
          }
        })
        return num;
      }
    },
    notSub() {
      return (val) => {
        const status = val.status;
        if (val.isLoginAndJoinOffice) {
          return false;
        } else {
          return (status == 'DRAFT' && this.permissions == 1);
        }
      }
    }
  },
  mounted() {
    const def = this.open ? this.allDepartmentId : [];
    this.activeKey = def;
    // console.log(111111111111111)
  },
  methods: {
    validate(val) {
      const funcs = [];
      for (let idx in this.$refs) {
        if (idx.indexOf('editTable') > -1) {
          const item = this.$refs[idx][0];
          funcs.push(item.validate())
        }
      }
      return Promise.all(funcs).then((result) => {
        const res = (result.find(e => e))
        return Promise.resolve(res)
      })
    },
    handleClick(event, ref) {
      // console.log(this.$refs[ref])
      event.stopPropagation();
      // If you don't want click extra trigger collapse, you can prevent this:
      this.$refs[ref] && this.$refs[ref][0].addrow();
    },
  },
};
</script>
<style lang="less" scoped>
  .btn_right {
    user-select: none;
  }
  /deep/ .ant-collapse {
    border: none;
    .ant-collapse-item-disabled {
      .ant-collapse-header {
        color: #000000a6;
      }
    }
    .ant-collapse-item {
      border: none;
      .ant-collapse-header {
        padding: 0 16px;
        height: 40px;
        background: #f2f2f2;
        line-height: 40px;
        border: none;
      }
      .ant-collapse-content {
        border: none;
      }
      .ant-collapse-content-box {
        padding: 0;
      }
    }
  }
</style>

